// src\components\router\NewRouter.jsx
// 根据不同的路由显示不同的页面内容的组件
import React, { useEffect, useState } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom';
import Home from '@/views/sendbox/home/Home';
import UserList from '@/views/sendbox/user-manage/UserList';
import RoleList from '@/views/sendbox/right-manage/RoleList';
import RightList from '@/views/sendbox/right-manage/RightList';
import NoPermission from '@/views/sendbox/nopermission/NoPermission';
import NewsAdd from '@/views/sendbox/new-manage/NewsAdd';
import NewsDraft from '@/views/sendbox/new-manage/NewsDraft';
import NewsCategory from '@/views/sendbox/new-manage/NewsCategory';
import NewsPreview from '@/views/sendbox/new-manage/NewsPreview';
import NewsUpdate from '@/views/sendbox/new-manage/NewsUpdate';
import Audit from '@/views/sendbox/audit-manage/Audit';
import AuditList from '@/views/sendbox/audit-manage/AuditList';
import Unpublished from '@/views/sendbox/publish-manage/Unpublished';
import Published from '@/views/sendbox/publish-manage/published';
import Sunset from '@/views/sendbox/publish-manage/Sunset';
import axios from 'axios';
import { Spin } from 'antd';
import { connect } from 'react-redux';
// 路由和组件的映射表
const RouteToComponent = {
    "/home": Home,
    "/user-manage/list": UserList,
    "/right-manage/role/list": RoleList,
    "/right-manage/right/list": RightList,
    "/news-manage/add": NewsAdd,
    "/news-manage/draft": NewsDraft,
    "/news-manage/category": NewsCategory,
    "/news-manage/preview/:id": NewsPreview,
    "/news-manage/update/:id": NewsUpdate,
    "/audit-manage/audit": Audit,
    "/audit-manage/list": AuditList,
    "/publish-manage/unpublished": Unpublished,
    "/publish-manage/published": Published,
    "/publish-manage/sunset": Sunset,
}
// UI部分
function NewRouter(props) {
    const [backRoutList, setBackRoutList] = useState([]);
    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    useEffect(() => {
        //  Promise.all用于将多个 Promise 实例,包装成一个新的 Promise 实例
        Promise.all([
            axios.get('http://localhost:8888/rights'),
            axios.get('http://localhost:8888/children')
        ]).then(res => {
            // console.log("resss", res);
            setBackRoutList([...res[0].data, ...res[1].data]);
        })
    }, []);
    //判断当前路由的权限
    const checkRoute = (item) => {
        // 既要判断路由组件映射中有无改路由又要判断改路由本身的权限限制
        return RouteToComponent[item.key] && (item.pagepermisson || item.routepermisson);
    }
    // 判断当前用户是否有这个路由的权限
    const checkUseRoute = (item) => {
        return rights.includes(item.key);
    }
    return (
        <div>
            {/* spinning为false不加载，为true时加载 */}
            <Spin size='large' spinning={props.isLoading}>
                <Switch>
                    {
                        backRoutList.map(e => {
                            if (checkRoute(e) && checkUseRoute(e)) {
                                return <Route path={e.key} key={e.key} component={RouteToComponent[e.key]}></Route>
                            } else {
                                return null
                            }
                        })
                    }
                    {/* 重定向：如果输入的路由只有/,则重定向到/home */}
                    <Redirect from='/' to='/home' exact></Redirect>
                    {/* 如果输入的不是以上任何路由，则到“无权限”页面中 */}
                    <Route path='*' component={NoPermission}></Route>
                </Switch>
            </Spin>

        </div>
    )
}
const mapStateToProps=({LoadingReducer:{isLoading}})=>{
    return {isLoading};
}
export default connect(mapStateToProps)(NewRouter);